<template>
  <div class="user-algorithm-data">
    <h2>已通过题目展示</h2>

    <div v-if="classifiedProblems">
      <div 
        v-for="(problems, difficulty) in classifiedProblems"
        :key="difficulty"
        class="difficulty-section"
      >
        <div :style="{backgroundColor:getColor(difficulty)}" class = "difficulty-title">
          <h3>{{ difficulty }}</h3>
        </div>
        <div class="problem-list">
          <div
            v-for="problem in problems"
            :key="problem.problem_number"
            class="problem-item"
          >
            <a
              :href="getProblemLink(problem.problem_number)"
              target="_blank"
              @mouseenter="showTags(problem.problem_number)"
              @mouseleave="hideTags"
            >
              {{ problem.problem_number }}
            </a>
            <div v-if="hoveredProblem === problem.problem_number" class="tags-tooltip">
              <span v-for="tag in problem.tags" :key="tag.index" class="tag">
                {{ tag.tag_name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/axios';

export default {
  name: 'PassedProblems',
  data() {
    return {
      solvedProblems: [],
      hoveredProblem: null, // 当前悬停的题目
      DIFFICULTY_INDEX_MAPPING: {
        "暂无评定": 8,
        "入门": 1,
        "普及-": 2,
        "普及/提高-": 3,
        "普及+/提高": 4,
        "提高+/省选-": 5,
        "省选/NOI-": 6,
        "NOI/NOI+/CTSC": 7,
      },
    };
  },
  computed: {
    // 按难度分类题目，并按照 DIFFICULTY_INDEX_MAPPING 的顺序排序
    classifiedProblems() {
      const categories = {};
      this.solvedProblems.forEach((problem) => {
        const difficulty = problem.difficulty || '暂无评定';
        if (!categories[difficulty]) {
          categories[difficulty] = [];
        }
        categories[difficulty].push(problem);
      });

      // 将分类后的题目按 DIFFICULTY_INDEX_MAPPING 的顺序排序
      const sortedCategories = Object.keys(categories)
        .sort((a, b) => this.DIFFICULTY_INDEX_MAPPING[a] - this.DIFFICULTY_INDEX_MAPPING[b])
        .reduce((obj, key) => {
          obj[key] = categories[key];
          return obj;
        }, {});

      return sortedCategories;
    }
  },
  methods: {
    // 获取用户通过的题目
    async fetchSolvedProblems() {
      try {
        const response = await axios.get('/api/recommendation/frontend_get_user_solved_problems_info/');
        this.solvedProblems = response.data.solved_problems;
      } catch (error) {
        console.error('获取已通过题目失败:', error);
      }
    },

    // 显示标签
    showTags(problemNumber) {
      this.hoveredProblem = problemNumber;
    },
    hideTags() {
      this.hoveredProblem = null;
    },

    // 获取题目链接
    getProblemLink(problemNumber) {
      return `https://www.luogu.com.cn/problem/${problemNumber}`;
    },
    getColor(difficulty) {
      const mappingTable = {
        '入门': '#FF4C61',
        '普及-': '#F39C11',
        '普及/提高-': '#FFC116',
        '普及+/提高': '#52C41A',
        '提高+/省选-': '#3498DB',
        '省选/NOI-': '#9D3DCF',
        'NOI/NOI+/CTSC': '#0E1D69',
        '暂无评定': '#bfbfbf',
      };
      return mappingTable[difficulty];
    },
  },
  mounted() {
    this.fetchSolvedProblems();
  }
};
</script>

<style scoped>
.user-algorithm-data {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.difficulty-section {
  margin-bottom: 20px;
}

.difficulty-title {
  width:100px;
  height: 36px;
  margin: 20px auto;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  color:#f9f9f9;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.problem-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 设置列对齐，每列最小宽度为 100px */
  gap: 10px;
}

.problem-item {
  position: relative;
  text-align: center;
}

.problem-item a {
  display: inline-block;
  width: 100%;
  padding: 8px 0;
  background-color: #e3f2fd;
  color: #007bff;
  border-radius: 4px;
  text-decoration: none;
}

.tags-tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
  max-width: 250px; /* 限制最大宽度 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* 灵活的列布局，允许长标签换行 */
  gap: 5px;
}

.tag {
  background-color: #007bff;
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap; /* 保证标签文字在单行显示 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>